<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .parent{
            /*相对定位*/
            position: relative;

            width: 500px;
            height:500px;

            background-color: #ff8500;
            margin:100px;
        }
        .child{
            width:150px;
            height:150px;
            background-color: darkred;

            /*绝对定位是相对于父元素定位的
            绝对定位相对于离自己最近的相对定位的父元素进行定位，或最近的绝对定位的父元素
            如果当前盒子没有相对定位的父元素，此时相对于body定位
            原来的位置不在保存，因为脱离了文档流（脱标）
            可用于设置背景图等，使用绝对定位后设置其z-index:-1使之不占位置又能被看见
            */
            position: absolute;
            left:100px;
            top:100px;
        }
        /*子绝父相：可以让子元素在父元素中进行定位
        */

    </style>
</head>
<body>
<div class="parent">
    <div class="child"></div>
    <div>12132</div>
</div>
</body>
</html>